
<template>
  <div class="home">
    <div id="box">
        <div class="header">
            <h4>饿了么</h4>
            <input type="text" v-model="text" placeholder="输入商家 商品名称" @click="serachClick">
           
        </div>
            <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
              <van-swipe-item v-for="(item,index) in imgs" :key="index">
              <img :src="item.bannerUrl" alt="">
              </van-swipe-item>

            </van-swipe>
        <span>猜你喜欢</span>
        <div class="row">
            <div :class="{active:currentIndex==index}" @click="handle(index)" class="btn" v-for="(item,index) in arr">
                {{item}}
            </div>
        </div>
        <div class="list">
            <ul>
                <li v-for="(item,index) in list" :key="index" @click="toDetail(item)">
                    <img :src="item.picUrl" alt="">
                    <div>
                        <p class="p1">{{item.name}}</p>
                        <p class="p2">☆{{item.wmPoiScore/10}}</p>
                        <span class="p3">{{item.averagePriceTip}}</span><span class="p4">{{item.deliveryTimeTip}} {{item.distance}}</span>
                    </div>
                </li>
            </ul>
        </div>
  </div>
  </div>
</template>

<script>
import {banner_list,shop_list} from '../../utils/api';
export default {
    data(){
        return{
        text:"",
        currentIndex:0,
        currentIndex1:0,
        arr:["综合排序","距离最近","销量最高","筛选"],
        imgs:[],
        list:[
        //     {name:"一点点",pic:"",point:"☆4.3",price:"起送￥20",time:"47分钟",length:"3.3Km",sum:"3.3"},
        //     {name:"麦当劳",pic:"",point:"☆4.6",price:"起送￥0",time:"28分钟",length:"2.3Km",sum:"2.3"},
        //     {name:"蜜雪冰城",pic:"",point:"☆4.8",price:"起送￥15",time:"32分钟",length:"1.4Km",sum:"1.4"},
        //     {name:"故事里的炸鸡",pic:"",point:"☆5.0",price:"起送￥1",time:"30分钟",length:"335m",sum:"0.335"},

        //     ],
        // footlist:[
        //         {pic:"",name:"首页"},
        //         {pic:"",name:"订单"},
        //         {pic:"",name:"我的"}

            ]
        
        }
    },
    methods:{
        handle(index){
            this.currentIndex = index;
            console.log(index,this.list);
            if(index==1){
                this.list.sort(
                    (a,b)=>{
                        return(a.wmPoiScore/1<b.wmPoiScore/1?-1:(a.wmPoiScore/1>b.wmPoiScore/1)?1:0)
                    }
                )
                
                
            }else if(index==2){
                this.list.sort(
                    (a,b)=>{
                        return(a.wmPoiScore/1>b.wmPoiScore/1?-1:(a.wmPoiScore/1<b.wmPoiScore/1)?1:0)
                    }
                )
            } 

        },
        handleClick(index){
            this.currentIndex1 = index;
        },
        serachClick(){
            this.$router.push('/search');
        },
        toDetail(item){//跳转到详情页
            this.$router.push('/detail/'+item.mtWmPoiId)//斜杠要注意
        }


    },
    mounted(){
        banner_list().then((res)=>{
            // console.log(res.data);
            this.imgs = res.data.list
        })
        shop_list().then((res)=>{
            // console.log(res.data);
            this.list = res.data.list
        })
    }
}
</script>

<style scoped>
/* .home{
    background-color: aqua;
    height: 300px;
    line-height: 300px;
    text-align: center;
} */
        * {
            margin: 0;
            padding: 0;
        }

        .home{
            display: flex;
            justify-content: center;
            flex-direction: column;
            
        }

        .header {
            height: 80px;
            width: 100%;
            background-color: #009afe;
        }
        .header h4{
            font-size: 18px;
            color:#fff;
            padding-top: 10px;
            margin-left: 10px;
        }
        .header input {
            background-color: #f5fbff;
            border: none;
            outline: none;
            width: 80%;
            height: 30px;
            line-height: 30px;
            border-radius: 15px;
            margin-top: 10px;
            margin-left: 30px;
            text-align: center;
            

        }
        .my-swipe{
            height: 88px;
            width: 90%;
            margin: 20px 0 0 15px;
            background-color: #009afe;
            border-radius: 5px;
        }
        .my-swipe img{
            width: 100%;
            height: 88px;
        }
       

        span {
            display: inline-block;
            padding: 10px 10px;
            font-size: 18px;
            font-weight: bold;
        }
         .row{
           display: flex;
           flex-direction: row;
           justify-content: space-around;
            
        }
        .active {
            font-size: 18px;
            color: royalblue;
        }
        .list{
            padding-bottom:60px ;
        }
        .list li {
            width: 100%;
            height: 100px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-top: 10px;
        }
        .list li img{
            width: 97px;
            height: 97px;
            margin: 0 5px;
        }
        .list li .p1{
            font-size: 18px;
            font-weight: bold;
            padding-left: 10px;
        }
        .list li .p2{
            font-size: 14px;
            color: orangered;
            padding-left: 10px;
            margin-top: 5px;
        }
        .list li .p3,.p4{
            font-size: 15px;
            font-weight: normal;
            color: #ccc;
        }
        .footer {
            position: fixed;
            bottom: 0;
            width: 100%;
            height: 40px;
            background-color: red;
        }
        .footer ul{
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        .footer ul li{
            flex: 1;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            align-items: center;
            background-color: skyblue;
            
        }
        .footer ul li span{
            font-size: 18px;
            font-weight: normal;
        }
        .footer ul .color{
            background-color: white;
            color: skyblue;
        }
</style>